<style lang="less">
  @import './style.less';
</style>
<template>
	<div class="container" style="padding-bottom:102px">
		<div class="jp-cont">
			<div class="jp-top">
				<h6 v-if="prizeInfo.sponsorIntroduce == 1">{{organizer.name}}</h6>
				<h2 class="tc">{{prizeInfo.rewardName}}</h2>
				<p class="tc">兑奖期限：{{prizeInfo.timeBeg}}至{{prizeInfo.timeEnd}}</p>
				<span class="close" @click="$util.turnToAct"></span>
			</div>
			<div class="jp-text-card jp-code tc">
				
				<p class="duihuanma" >兑奖码：{{prizeInfo.ticket_code}}&nbsp;<span style="cursor:pointer" class="copy-code"  @click="copy" :data-clipboard-text="prizeInfo.ticket_code">复制兑换码</span></p>
				<p v-if="prizeInfo.rewardGetRadio == 0">{{prizeInfo.actionNotice}}</p>
				<p v-else-if="prizeInfo.rewardGetRadio == 2">{{prizeInfo.webActionNotice}}</p>
			</div>
			<div class="jp-text-card jp-text">
				<h2 class="jp-text-tittle">兑奖券详情</h2>
				<div class="jp-text-cont">
					<!-- <div class="group">
						<label class="group-left">可用时段：</label>
						<div class="group-right">{{prizeInfo.canUseTime[0]}}&nbsp;至&nbsp;{{prizeInfo.canUseTime[1]}}</div>
					</div> -->
					<div class="group">
						<label class="group-left">可用日期：</label>
						<div class="group-right">
							<span v-for="row in prizeInfo.canUseDate">{{row}}&nbsp;</span>
						</div>
					</div>                
					<div class="group" v-if="prizeInfo.rewardGetRadio == 0">
						<label class="group-left">兑奖地址：</label>
						<div class="group-right">{{prizeInfo.actionAdress}}</div>
					</div>
					<div class="group">
						<label class="group-left">兑换说明：</label>
						<div class="group-right">{{prizeInfo.prizeIntroduce}}</div>
					</div>            
				</div>
			</div>
			<div class="jp-text-card jp-text" style="margin-bottom:4rem">
				<a :href="'tel:' + prizeInfo.serviceTelephone">
					<h2 class="jp-text-tittle">客服电话
						<span class="tel">
							<i><img src="http://www.ihuyi.com/hd-temp/choujiang/images/tel.gif" width="100%"></i>{{prizeInfo.serviceTelephone}}
						</span>
					</h2>
				</a>
				
				<template v-if="prizeInfo.sponsorIntroduce == 1">
					<hr>
					<a :href="organizer.url"><h2 class="jp-text-tittle">主办方介绍<div class="cell-ft"></div></h2></a>
				</template>
				
				<!-- 自定义按钮 -->
				<template v-if="prizeInfo.customPersonlRadio != 0">
					<hr>
					<a :href="prizeInfo.buttonUrl" v-if="prizeInfo.customPersonlRadio == 1"><h2 class="jp-text-tittle">{{prizeInfo.buttonName}}&nbsp;<div class="cell-ft"></div></h2></a>
					<a href="javascript:;" v-else @click="handleFollow"><h2 class="jp-text-tittle">{{prizeInfo.qrButtonName}}<div class="cell-ft"></div></h2></a>
				</template>
			</div>
		</div>
		<div class="ad tc">
			<div class="cont">
				
				<Button v-if="prizeInfo.rewardGetRadio == 0" type="success" size="large" long @click="exchange">立即兑换</Button>
				<Button v-else-if="prizeInfo.rewardGetRadio == 2" type="success" size="large" long ><a :href="prizeInfo.webAdress">立即兑换</a></Button>
				
			</div>
		</div>
		
		<!-- 扫码核销 -->
		<Modal footer-hide v-model="scanShow" :styles="{width: '70% !important',margin: 'auto',top: '20px'}">
			<div class="pd25 tc">
				<h2>请联系核销员扫码核销</h2>
				<div style="padding:10px 30px 0"><img :src="prizeInfo.ticket_qr_img" width="100% "></div>
				<h2>{{prizeInfo.ticket_code}}</h2>
				<h2>到店后向店员出示</h2>
			</div>
		</Modal>

		<Modal v-model="selfShow" title="请输入核销码">

			<Input v-model="code"></Input>
			<p style="margin-top:5px;" slot="footer">
				<Button style="width:48%;" @click="selfShow = false">取消</Button>
				<Button type="primary" style="width:48%;float: right;"  @click="doSure">确认</Button>
			</p>
		</Modal>

		<Modal footer-hide v-model="followModal" :styles="{width: '70% !important',margin: 'auto',top: '40px'}">
			<div style="padding:10px 30px 0"><img :src="prizeInfo.qrCodeImg" width="100% "></div>
			<div style="padding:0 30px 10px"><img src="http://www.ihuyi.com/hd-temp/choujiang/images/changancode.gif" width="100%"></div>
		</Modal>
	</div>
</template>
<script>
	import Clipboard from 'clipboard';
	import * as backApi from '@/api/play'
	import config from '@/config'
    const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

    export default {
        data () {
            return {
				scanShow: false,
				selfShow: false,
				status: true,
				code: '',
				followModal: false,
				prizeInfo: {
					
				},
				organizer: {}
            }
		},
		created () {
			function htRem() {
				var clientWidth = document.documentElement.clientWidth;
				if (clientWidth > 750) {
					clientWidth = 750;
				}
				document.documentElement.style.fontSize = 20 * (clientWidth / 320) + 'px';   
			}
			htRem();
			window.onresize = function() {
				htRem();
			};

			let _this 	= this;
			//初始化页面数据
			this.initActivity();
		},
		methods: {
			copy() {
				let clipboard = new Clipboard('.copy-code');
				let _this     = this;
				clipboard.on('success', e => {
					// 释放内存
					clipboard.destroy()
					_this.$Message.success('复制成功');
				})
				clipboard.on('error', e => {
					// 不支持复制
					console.log('该浏览器不支持自动复制')
					_this.$Message.error('该浏览器不支持自动复制');
					// 释放内存
					clipboard.destroy()
				})
			},
			initActivity () {
				// console.log(this.$route.query);
				let queryData 	= {winnerNum: this.$route.query.winnerNum};
				let _this 		= this;
				backApi.prizeDetail(queryData).then(res => {
					if (res.data.code == 1) {
						this.prizeInfo 			= res.data.result;
						this.organizer 			= res.data.organizer;

						//qrcode img
                        this.prizeInfo.ticket_qr_img    = 
                            baseUrl + 'getTicketQrImg?code=' + this.prizeInfo.ticket_code;
					} else if (res.data.code == 2) {
						let config 		= {
							content: 	res.data.message,
							onClose () {
								_this.$router.push({name: 'index'});
							}
						};
						this.$Message.error(config);
					} else {
						this.$router.push({name: '500'})
					}
				});
			},
			exchange () {
				if (this.prizeInfo.verifyCodeRadio == 0) {
					this.scanShow 	= true;
				} else {
					this.selfShow 	= true;
				}
			},
			doSure () {
				if (this.status == false) {
					this.$Message.error('该兑奖码已使用');
					return false;
				}

				if (this.code == '') {
					this.$Message.error('请输入核销码');
					return false;
				}

				let postData 	= {code: this.code, ticket: this.prizeInfo.ticket_code, winnerNum: this.$route.query.winnerNum};
				backApi.verifyCode(postData).then(res => {
					if (res.data.code == 1) {
						let _this 		= this;
						let config 		= {
							content: 	'核销成功',
							onClose () {
								_this.selfShow 	= false;
							}
						};
						this.$Message.success(config);
						this.status 	= false;//标记已使用
						
					} else if (res.data.code == 2) {
						let config 		= {
							content: 	res.data.message,
							onClose () {
							}
						};
						this.$Message.error(config);
					} else {
						this.$Message.error('核销异常，请重新尝试');
					}
				});
			},
			handleFollow () {
				this.followModal 	= true;
			},
			copyTaobaoCode () {
				let clipboard = new Clipboard('.taobao-code');
				let _this     = this;
				clipboard.on('success', e => {
					// 释放内存
					clipboard.destroy()
					_this.$Message.success('复制成功');
				})
				clipboard.on('error', e => {
					// 不支持复制
					console.log('该浏览器不支持自动复制')
					_this.$Message.error('该浏览器不支持自动复制');
					// 释放内存
					clipboard.destroy()
				})
			}
		},
    };
</script>
